<template>
	<view class="bg-white flex flex-direction" style="height: 100vh; width: 100vw;" :style="[{paddingTop: StatusBar + 'px'}]">
		<!-- <view style="padding: 32rpx;">
			<text class="cuIcon-close text-black" style="font-size: 50rpx; font-weight: bold;"></text>
		</view> -->
			
		<view style="padding: 32rpx; font-size: 50rpx; font-weight: bold; color: #000000;margin-top: 120rpx;">
			账号密码登录
		</view>
		
		<view style="margin-top: 144rpx; padding: 0 32rpx;">
			<view class="flex align-center justify-between solid-bottom" style="height: 104rpx;">
				<input v-model="mobile" type="number"  placeholder="手机号" style="font-size: 40rpx;color: #1C1C1E;" placeholder-style="font-size: 40rpx; color: #999999;"/></input>
				<text v-if="mobile && mobile.length>0" class='cuIcon-roundclose text-gray' @click="mobile=''" style="font-size: 40rpx;"></text>
			</view>
			<view class="flex align-center justify-between solid-bottom" style="height: 104rpx;">
				<input v-if="!showpassword" v-model="password" :password="true" :focus="isFocus" placeholder="密码至少6位" style="font-size: 40rpx;color: #1C1C1E;" placeholder-style="font-size: 40rpx; color: #999999;"/></input>
				<input v-if="showpassword" v-model="password" type="text" :focus="isFocus" placeholder="密码至少6位" style="font-size: 40rpx;color: #1C1C1E;" placeholder-style="font-size: 40rpx; color: #999999;"/></input>
				<view :class="[showpassword? 'cuIcon-attention': 'cuIcon-attentionforbid']" @click="show()" class=" text-gray" style="font-size: 40rpx;"></view>
			</view>
		</view>
		
		<view style="padding: 0 32rpx; margin-top: 64rpx;">
			<button @click="login" :disabled="disabled" :style="disabled ? {opacity: 0.5} : ''" 
			style=" height: 96rpx; color: white; background-color: #007AFF; border-radius: 8rpx;font-size: 36rpx;">
			登录</button>
		</view>
		
		<view class="flex align-center justify-end" style="padding: 0 32rpx; margin-top: 48rpx;">
			<view class="text-primary" style="font-size: 28rpx; color: #007AFF;">
				找回密码
			</view>
		</view>
		
		<view class="flex align-end justify-center" style="margin-top: 360rpx;" @click="$Router.push({name:'phoneLogin'})">
			<view class="text-primary" style="font-size: 28rpx; color: #007AFF;">
				切换登录方式
			</view>
		</view>
		
		<view class="cu-load load-modal" v-if="loading">
			<!-- <view class="cuIcon-emojifill text-orange"></view> -->
			<image src="/static/login3.png" mode="aspectFit"></image>
			<view class="gray-text">登录中...</view>
		</view>
	</view>
</template>

<script>
	import { mapActions } from "vuex"
	export default{
		data() {
			return {
				mobile: '15340531637',
				password: '111111',
				showpassword: false,
				isFocus: false,
				loading: false
			}
		},
		methods: {
			...mapActions([ "mLoginFrontEnd","PhoneLogin" ]),
			login() {
				// if(!this.validateMobile() || !this.validatePassword()) {
				// 	return ;
				// }
				let loginParams = {
				  mobile:this.mobile,
				  password:this.password
				}
				this.loading=true;
				this.mLoginFrontEnd(loginParams).then((res) => {
				  // console.log("mLoginFrontEnd",res)
				  this.loading=false;
				  if(res.data.success){
					  this.$tip.success('登录成功!')
					  this.$Router.replaceAll({name:'indexFrontEnd'})
				  }else{
				      this.$tip.alert(res.data.message);
				  }
				}).catch((err) => {
				  let msg = err.data.message || "请求出现错误，请稍后再试"
				  this.$tip.alert(msg);
				}).finally(()=>{
				  this.loading=false;
				})
			},
			validateMobile() {
				//手机号正则
				var mPattern = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/;
				if(!mPattern.test(this.mobile)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					})
					return false;
				}
				return true;
			},
			validatePassword() {
				return true;
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			show(){
				this.showpassword=!this.showpassword;//隐藏密码
				this.isFocus = true;
			},
		},
		computed: {
			disabled() {
				if(this.mobile === '' || this.password === '') {
					return true;
				}
				return false;
			}
		}
	}
</script>

<style lang="scss">
</style>
